<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="关注" name="first">
      <div class="guanzhu">
        <ul class="show">
          <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <h5>基本厨具:</h5>
            <h6>一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌</h6>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
          <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来欢的早餐迎接</p>
            <h5>基本厨具:</h5>
            <h6>一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌</h6>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
          <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <h5>基本厨具:</h5>
            <h6>一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌</h6>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
          <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <h5>基本厨具:</h5>
            <h6>一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌，一个平底锅，推荐德国进口品牌</h6>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
        </ul>
      </div>
    </el-tab-pane>
    <el-tab-pane label="发现" name="second">
      <div class="find">
        <div class="find1">
          <p>一起来吐槽<span>11.11</span></p>
          <h1>买了就后悔的那些东西</h1>
        </div>
        <div class="find2">
          <p>顶置</p>
          <span>【有奖活动】那些买了就后悔的东西</span>
        </div>
        <ul class="show">
          <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <ul class="photos">
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
            </ul>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
           <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来欢的早餐迎接</p>
            <ul class="photos">
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
            </ul>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
           <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <ul class="photos">
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
            </ul>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
        </ul>
      </div>
    </el-tab-pane>
    <el-tab-pane label="最新" name="third">
      <div class="new">
        <ul class="list">
          <li>
            <span class="iconfont icon-hongpei"></span>
            <i>秀美食</i>
          </li>
          <li>
            <span class="iconfont icon-hongpei"></span>
            <i>烘焙</i>
          </li>
          <li>
            <span class="iconfont icon-hongpei"></span>
            <i>出去吃</i>
          </li>
          <li>
            <span class="iconfont icon-hongpei"></span>
            <i>厨艺交流</i>
          </li>
          <li>
            <span class="iconfont icon-hongpei"></span>
            <i>聊家常</i>
          </li>
          <li>
            <span class="iconfont icon-hongpei"></span>
            <i>厨艺问答</i>
          </li>
        </ul>
        <ul class="show">
          <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <ul class="photos">
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
            </ul>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
           <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来欢的早餐迎接</p>
            <ul class="photos">
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
            </ul>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
           <li>
            <div class="top">
              <h1>
                <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
                <h2>
                  <em>LEI-LEI</em>
                  <span>3分钟前</span>
                </h2>
              </h1>
              <h3>
                <i class="iconfont icon-jiahao"></i>
                <span>关注</span>
              </h3>
            </div>
            <p class="middle">【猫宁】做一份喜欢的早餐迎接周末的到来</p>
            <ul class="photos">
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
              <li><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></li>
            </ul>
            <div class="bottom">
              <p class="iconfont icon-yanjing"><i>1222</i></p>
              <p class="iconfont icon-xinxi"><i>72</i></p>
              <p class="iconfont icon-zan4"><i>629</i></p>
            </div>
          </li>
        </ul>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'second'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
  flex:1;
  width: 100%;
  height: auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.guanzhu,.find,.new{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .find1{
    height: 1rem;
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 0.1rem;
    p{
      font-size: 0.15rem;
      span{
        font-size: 0.34rem;
        font-style:italic;
      }
    }
    h1{
      font-size: 0.24rem;
      font-weight: 100;
      font-style:italic
    }
  }
  .find2{
    width: 100%;
    height: 0.4rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    p{
      margin-left: 0.2rem;
      width: 0.34rem;
      height: 0.18rem;
      line-height: 0.18rem;
      text-align: center;
      color: #f00;
      font-size: 0.12rem;
      border: 1px solid rgba(210, 9, 5, 1);
    }
    span{
      font-size: 0.1rem;
    }
  }
  .show{
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.15rem 0;
    li{
      width: 100%;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #ccc;
      margin-bottom: 0.1rem;
      .top{
        width: 100%;
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h1{
          height: 100%;
          display: flex;
          align-items: center;
          img{
            width: 0.35rem;
            height: 0.35rem;
            border-radius: 50%;
            margin-right:0.1rem;
          }
          h2{
            display: flex;
            flex-direction: column;
            justify-content:center;
            em{
              font-size: 0.12rem;
              font-weight: bold;
            }
            span{
              font-size: 0.1rem;
              color: #ccc;
              font-weight: none;
            }
          }
        }
        h3{
          height: 0.22rem;
          line-height: 0.22rem;
          color: #f00;
          border: 1px solid #ccc;
          i{
            font-size: 0.12rem;
            padding-left:0.04rem;
          }
          span{
            font-size: 0.14rem;
            padding-right: 0.04rem;
          }
        }
      }
      .middle{
        padding: 0.07rem 0;
        font-size: 0.14rem;
        width: 100%;
      }
      h5{
        padding: 0.05rem 0;
        font-size: 0.14rem;
        width: 100%;
      }
      h6{
        font-size: 0.14rem;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .photos{
        width: 100%;
        display: flex;
        justify-content: space-between;
        li{
          width: 32%;
          height: 1.1rem;
          margin-bottom: 0;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0.05rem 0.2rem;
        p{
          font-size: 0.18rem;
          line-height: 0.24rem;
          i{
            padding-left: 0.03rem;
            font-size: 0.12rem;
          }
        }
        .icon-xinxi{
          font-size: 0.14rem;
        }
      }
    }
  }
}
.new{
  .list{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 0.15rem;
    li{
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span{
        font-size: 0.24rem;
        color: orangered;
      }
      i{
        font-size: 0.14rem;
      }
    }
  }
}
</style>
<style lang="scss">
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
.el-tabs__content{
  flex: 1;
  width: 100%;
  height: auto;
  overflow: auto;
}
</style> 
